<!--
 * @Author: Jeecg
 * @Description: logo component
-->
<template>
  <div class="anticon" :class="getAppLogoClass" @click="goHome">
    <!-- 左上角图标删除 -->
    <!-- <img src="../../../assets/images/logo.png" /> -->
    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
      {{ shortTitle }}
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, unref } from "vue";
import { useGlobSetting } from "/@/hooks/setting";
import { useGo } from "/@/hooks/web/usePage";
import { useMenuSetting } from "/@/hooks/setting/useMenuSetting";
import { useDesign } from "/@/hooks/web/useDesign";
import { PageEnum } from "/@/enums/pageEnum";
import { useUserStore } from "/@/store/modules/user";

const props = defineProps({
  /**
   * The theme of the current parent component
   */
  theme: { type: String, validator: (v: string) => ["light", "dark"].includes(v) },
  /**
   * Whether to show title
   */
  showTitle: { type: Boolean, default: true },
  /**
   * The title is also displayed when the menu is collapsed
   */
  alwaysShowTitle: { type: Boolean },
});

const { prefixCls } = useDesign("app-logo");
const { getCollapsedShowTitle } = useMenuSetting();
const userStore = useUserStore();
const { title, shortTitle } = useGlobSetting();

const go = useGo();

const getAppLogoClass = computed(() => [
  prefixCls,
  props.theme,
  { "collapsed-show-title": unref(getCollapsedShowTitle) },
]);

const getTitleClass = computed(() => [
  `${prefixCls}__title`,
  {
    "xs:opacity-0": !props.alwaysShowTitle,
  },
]);

function goHome() {
  console.log(userStore.getUserInfo.homePath);
  console.log(PageEnum.BASE_HOME);
  go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
}
</script>
<style lang="less" scoped>
@prefix-cls: ~"@{namespace}-app-logo";

.@{prefix-cls} {
  display: flex;
  align-items: center;
  padding-left: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  //左侧菜单模式和左侧菜单混合模式加渐变背景色
  &.jeecg-layout-mix-sider-logo,
  &.jeecg-layout-menu-logo {
    background: @sider-logo-bg-color;
  }
  // &.light {
  //   border-bottom: 1px solid @border-color-base;
  // }

  &.collapsed-show-title {
    padding-left: 20px;
  }

  &.light &__title {
    color: @primary-color;
  }

  &.dark &__title {
    color: @white;
  }

  &__title {
    font-size: 18px;
    font-weight: 600;
    transition: all 0.5s;
    line-height: normal;
  }
}
</style>
